<template>
  <div class="container">
    <div class="title clear">
      <i class="icon iconfont iconfanhui1" @click="goBack"></i>
      <div class="descBox">{{ projectScore.projectName }}</div>
      <div class="score fontColorTheme">
        <span
          >{{
            $route.query.year +
            '-' +
            $route.query.month +
            '-' +
            $route.query.day
          }}
          /
        </span>
        <span>{{ projectScore.score == null ? '--' : projectScore.score }}</span
        >分 / 评级：
        <span>{{
          projectScore.gradeLevel
            ? projectScore.gradeLevel === 'O'
              ? '其他'
              : projectScore.gradeLevel
            : '--'
        }}</span>
      </div>
    </div>
    <div class="mainCon">
      <el-row class="topBox">
        <el-col :span="24" style="padding-left: 0px">
          <div class="grid-content bg-purple">
            <div class="leftBBox">
              <el-row style="font-weight: 560; color: #333333">
                项目存在
                <span style="color: #e02020">{{ detailData.totalCount }}</span>
                项扣分
              </el-row>
              <div class="noDeduction" v-if="negetivePoints.length < 1">
                <img src="../../../static/img/noData.png" alt />
                <div class="text fS color999">暂无扣分项</div>
              </div>
              <!-- 扣分项 -->
              <div v-if="negetivePoints.length > 0">
                <div
                  class="deduction"
                  v-for="(item, i) in negetivePoints"
                  :key="i"
                >
                  <p class="dedTitle fS color333">
                    <span>{{ item.name }}</span
                    >( <span>根据项目数据</span>，存在
                    <span>{{ item.count }}</span
                    >项扣分)
                  </p>
                  <div>
                    <ul>
                      <li
                        class="mrT12"
                        v-for="(itemChild, j) in item.projectIndexs"
                        :key="j"
                      >
                        <div
                          class="clearfix"
                          @click="goRepair(i, j, itemChild.id)"
                          style="position: relative"
                        >
                          <i
                            class="icon iconfont iconzhankai"
                            style="
                              color: #e02020;
                              font-size: 12px;
                              position: absolute;
                              top: 8px;
                            "
                            v-if="isShowDetail !== i + '/' + j"
                          ></i>
                          <i
                            class="icon iconfont iconshouqi"
                            style="
                              color: #e02020;
                              font-size: 12px;
                              position: absolute;
                              top: 8px;
                            "
                            v-if="isShowDetail === i + '/' + j"
                          ></i>
                          <span
                            class="dedCon fS color333 ellipsis"
                            style="width: 60%; margin-left: 15px"
                            :title="
                              itemChild.reason
                                ? itemChild.reason.indexOf('2、扣分明细') > -1
                                  ? itemChild.reason
                                      .split('2、扣分明细')[0]
                                      .split('扣分原因：')[1]
                                  : itemChild.reason.indexOf('扣分原因：') > -1
                                  ? itemChild.reason.split('扣分原因：')[1]
                                  : itemChild.reason
                                : '--'
                            "
                            >{{
                              itemChild.reason
                                ? itemChild.reason.indexOf('2、扣分明细') > -1
                                  ? itemChild.reason
                                      .split('2、扣分明细')[0]
                                      .split('扣分原因：')[1]
                                  : itemChild.reason.indexOf('扣分原因：') > -1
                                  ? itemChild.reason.split('扣分原因：')[1]
                                  : itemChild.reason
                                : '--'
                            }}</span
                          >
                          <el-button
                            size="small"
                            class="funBut fr"
                            v-if="isShowDetail !== i + '/' + j"
                            >修复</el-button
                          >
                          <el-button
                            size="small"
                            class="funBut fr"
                            v-if="isShowDetail === i + '/' + j"
                            >{{ isOpenText }}</el-button
                          >
                          <span
                            class="dedCon fr fS color333"
                            v-if="!itemChild.gradeLevel"
                            >-{{ itemChild.score }}分</span
                          >
                          <span
                            class="dedCon fr fS color333"
                            v-if="itemChild.gradeLevel"
                            >定级{{
                              itemChild.gradeLevel
                                ? itemChild.gradeLevel === 'O'
                                  ? '其他'
                                  : itemChild.gradeLevel
                                : '--'
                            }}</span
                          >
                        </div>
                        <el-collapse-transition>
                          <div
                            class="rankDetail"
                            v-if="isShowDetail === i + '/' + j"
                          >
                            <div>
                              <div class="clearfix">
                                <p class="conTitle color333 fl">
                                  {{ specificData.indexName }}
                                </p>
                                <p
                                  class="fr pointsLevel"
                                  v-if="specificData.gradeLevel"
                                >
                                  定级{{
                                    specificData.gradeLevel
                                      ? specificData.gradeLevel === 'O'
                                        ? '其他'
                                        : specificData.gradeLevel
                                      : '--'
                                  }}
                                </p>
                                <p
                                  class="fr pointsLevel"
                                  v-if="!specificData.gradeLevel"
                                >
                                  -{{ specificData.score }}分
                                </p>
                              </div>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">扣分原因：</span>
                                <span class="fS color666 fl w80">
                                  {{
                                    specificData.reason
                                      ? specificData.reason.indexOf(
                                          '2、扣分明细'
                                        ) > -1
                                        ? specificData.reason
                                            .split('2、扣分明细')[0]
                                            .split('扣分原因：')[1]
                                        : specificData.reason.indexOf(
                                            '扣分原因：'
                                          ) > -1
                                        ? specificData.reason.split(
                                            '扣分原因：'
                                          )[1]
                                        : specificData.reason
                                      : '--'
                                  }}
                                  <span
                                    v-if="
                                      specificData.reason &&
                                      specificData.reason.indexOf(
                                        '2、扣分明细'
                                      ) > -1
                                    "
                                    @click="showScoreDetail(itemChild.id)"
                                    class="reduceDetail"
                                    >扣分明细</span
                                  >
                                </span>
                              </p>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">责任主体：</span>
                                <span class="fS color666 fl w80">
                                  <span
                                    class="type fontColorTheme fontBorderTheme"
                                    >{{ specificData.typeDesc }}</span
                                  >
                                  {{ specificData.companyName }}
                                </span>
                              </p>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">评价标准：</span>
                                <span class="fS color666 fl w80">{{
                                  specificData.evaluateStandard
                                }}</span>
                              </p>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">参考条例：</span>
                                <span class="fS color666 fl w80">{{
                                  specificData.referenceRules
                                }}</span>
                              </p>
                            </div>
                            <div class="way">
                              <p class="fS repair">如何修复</p>
                              <!-- <p  class = "labelWidth clearfix"><span class = "fS color666 fl">修复平台：</span><span class = "fS fl w80" style = "color:#409EFF;">我是扣分原因</span></p>
                                                            <p  class = "labelWidth clearfix"><span class = "fS color666 fl">修复方式：</span><span class = "fS color666 fl w80">我是扣分原因</span></p>-->
                              <div
                                v-html="specificData.repairTips"
                                class="howRepair"
                              ></div>
                            </div>
                          </div>
                        </el-collapse-transition>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <ReduceDialog
      :scoreDetailVisible="scoreDetailVisible"
      :reduceScoreDetail="reduceScoreDetail"
      @closeDialog="closeDialog"
    ></ReduceDialog>
  </div>
</template>

<script>
import topTitle from '@/components/publicCom/topTitle'
import ReduceDialog from './ReduceDialog'
export default {
  name: 'projectHistoryScoreDetail',
  components: {
    topTitle,
    ReduceDialog,
  },
  data() {
    return {
      scoreDetailVisible: false, //扣分明细弹窗
      reduceScoreDetail: {
        type: '',
        detailId: '',
        reduceScoreDetailInfo: [],
      },
      titleText: '历史评价详情',
      isShowDetail: '',
      isOpenText: '', //扣分
      isShowBonusPoints: '', //加分
      isOpenBonusPoints: '', //加分
      detailData: {},
      projectScore: {},
      negetivePoints: [],
      specificData: '', //具体详情
      projectId: '',
      projectScoreId: '',
      back: true,
    }
  },
  created() {
    this.projectId = this.$route.query.projectId
    this.projectScoreId = this.$route.query.projectScoreId
    this.getScoreData()
  },
  methods: {
    // 扣分明细弹窗
    showScoreDetail(detailId) {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditDeductionDetail/expand/getCreditDedDetail',
        data: {
          detailId,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            const results = response.data.result
            this.reduceScoreDetail.type = results.type
            if (results.type == '1') {
              this.handleData(results, 'names')
            } else if (results.type == '2') {
              this.handleData(results, 'recordTimes')
            } else {
              this.handleData(results, 'timeAndName')
            }
            this.scoreDetailVisible = true
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 处理明细数据
    handleData(results, detailName) {
      if (
        this.specificData.reason &&
        this.specificData.reason.indexOf('扣分明细：') > -1
      ) {
        let reduceStr = this.specificData.reason.split('扣分明细：')[1]
        if (reduceStr.indexOf('b') > -1) {
          // 存在未代发或补发或两条明细（A为补发）
          let reduceReason = this.specificData.reason
            .split('扣分明细：')[0]
            .split('扣分原因：')[1]
          let detailInfo = {}
          if (reduceReason.split('/')[0].indexOf('存在0') === -1) {
            detailInfo.title = reduceStr.split('b')[0].split('a')[1]
            let notIssued = null
            notIssued = results[detailName].filter((v) => {
              if (v.indexOf('A') === -1) {
                return v
              }
            })
            detailInfo.detail = notIssued
            this.reduceScoreDetail.reduceScoreDetailInfo.push(
              JSON.parse(JSON.stringify(detailInfo))
            )
          }
          if (reduceReason.split('/')[1].indexOf('存在0') === -1) {
            detailInfo = {}
            detailInfo.title = reduceStr.split('b')[1]
            let reissue = []
            results[detailName].forEach((v) => {
              if (v.indexOf('A') > -1) {
                reissue.push(v.split('A')[1])
              }
            })
            detailInfo.detail = reissue
            this.reduceScoreDetail.reduceScoreDetailInfo.push(
              JSON.parse(JSON.stringify(detailInfo))
            )
          }
        } else {
          this.reduceScoreDetail.reduceScoreDetailInfo[0] = {}
          this.reduceScoreDetail.reduceScoreDetailInfo[0].title = reduceStr
          if (detailName === 'timeAndName') {
            let detailArr = []
            let detailNameArr = Object.keys(results[detailName])
            for (let i = 0; i < detailNameArr.length; i++) {
              detailArr[i] = {}
              detailArr[i].month = detailNameArr[i]
              detailArr[i].name = JSON.parse(
                JSON.stringify(results[detailName][detailNameArr[i]])
              )
            }
            this.reduceScoreDetail.reduceScoreDetailInfo[0].detail = JSON.parse(
              JSON.stringify(detailArr)
            )
          } else {
            this.reduceScoreDetail.reduceScoreDetailInfo[0].detail = JSON.parse(
              JSON.stringify(results[detailName])
            )
          }
        }
      }
    },
    closeDialog() {
      this.scoreDetailVisible = false
      this.reduceScoreDetail.reduceScoreDetailInfo = []
    },
    goBack() {
      this.$router.push({
        path: '/home/enterpriseScore/projectHistoryScoreList',
        name: 'projectHistoryScoreList',
        data: {
          projectId: this.projectId,
          projectScoreId: this.projectScoreId,
        },
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/enterpriseScore/projectScoreList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 扣分点击显示详情
    async goRepair(index, j, id) {
      this.reduceScoreDetail.detailId = id
      if (this.isShowDetail === index + '/' + j) {
        this.isShowDetail = -1 //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
      } else {
        await this.getDetailData(id)
        this.isShowDetail = index + '/' + j //这里是把index赋值给isShow，isShow=index则显示
        this.isOpenText = '收起'
        this.isShowBonusPoints = -1
      }
    },
    getScoreData() {
      this.axios({
        method: 'post',
        url: 'api-ps/creditProjScorDetail/expand/findProjectScoreDetail',
        data: {
          projectId: this.projectId,
          projectScoreId: this.projectScoreId,
        },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            if (resp.data.result) {
              this.detailData = resp.data.result
              this.negetivePoints = this.detailData.indexDimList
              this.projectScore = this.detailData.projectScore || {}
            }
          } else {
            this.$message({
              type: 'error',
              message: resp.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '数据获取失败',
          })
        })
    },
    getDetailData(id) {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditProjScorDetail/expand/findProjectScoreDetailById',
        data: { id },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.specificData = resp.data.result
          } else {
            this.$message({
              type: 'error',
              message: resp.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .title {
    height: 56px;
    font-size: 0;
    background-color: #fff;
    padding: 0 24px;
    position: relative;
    .iconfanhui1 {
      font-size: 18px;
      margin-top: 18px;
      float: left;
    }
    .descBox {
      font-size: 22px;
      color: #242c3b;
      font-weight: 700;
      line-height: 56px;
      float: left;
    }
    .score {
      font-size: 24px;
      color: #333333;
      font-weight: bold;
      line-height: 56px;
      float: right;
    }
    &::after {
      content: '';
      width: calc(100%);
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      position: absolute;
      left: 0;
      top: 100%;
    }
  }
  .mainCon {
    padding: 24px;
    .topBox {
      margin-left: 0 !important;
      margin-right: 0 !important;
      /* 左边盒子样式 */
      .leftTBox {
        padding: 20px 25px;
        background: #fff;
        height: 122px;
        .companyName {
          color: #333333;
          font-size: 24px;
          .companyTit {
            display: inline-block;
            max-width: 600px;
          }
        }
        .rating {
          margin-top: 19px;
          .score {
            font-size: 24px;
            color: #333333;
          }
          .time {
            margin-left: 24px;
          }
        }
      }
      .leftBBox {
        background: #fff;
        /deep/.el-divider__text.is-left {
          left: 0;
        }
        /deep/ .el-divider__text {
          padding: 0;
          padding-right: 12px;
          font-size: 16px;
          color: #333333;
        }
        .deduction {
          margin-top: 12px;
          > div {
            padding-left: 96px;
          }
          .dedTitle {
            margin-bottom: 6px;
          }
          .funBut {
            color: #009588;
            border-color: #009588;
            background: #fff;
            width: 96px;
            margin-left: 60px;
          }
          .dedCon {
            display: inline-block;
            margin-top: 5px;
          }
          .rankDetail {
            margin-top: 12px;
            background: #f5f7fa;
            padding: 22px 24px;
            .conTitle {
              font-size: 16px;
              margin-bottom: 20px;
            }
            .way {
              margin-top: 8px;
              /deep/.howRepair {
                /* font-size: 14px;
                      color: #666666; */
                /* p { */
                /* font-size: 14px;
                      color: #666666; */
                /* } */
                span {
                  font-size: 14px !important;
                  color: #666666 !important;
                  font-family: 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif' !important;
                }
              }
            }
            .pointsLevel {
              color: #e02020;
            }
            .type {
              font-size: 12px;
              border: 1px solid #009588;
              padding: 0 2px;
              color: #009588;
              border-radius: 2px;
            }
          }
        }
        .noDeduction {
          text-align: center;
          margin-top: 48px;
          img {
            width: 160px;
            margin-bottom: 15px;
          }
        }
      }
      .explainBox {
        padding: 24px;
        background: #fff;
        margin-top: 10px;
        font-size: 14px;
        color: #999999;
      }
      .rightTBox {
        height: 122px;
        background: #fff;
        text-align: center;
        padding-top: 28px;
        margin-bottom: 10px;
        .ranking {
          font-size: 28px;
          margin-top: 10px;
        }
      }
      .rightBBox {
        background: #fff;
        padding: 16px 27px;
        /* margin-top: 10px; */
        .basicSituation {
          font-size: 16px;
          padding-bottom: 15px;
          margin-bottom: 15px;
          border-bottom: 1px solid #d5dee7;
        }
      }
    }
    .mrT12 {
      margin-top: 12px;
    }
    .labelWidth {
      margin-bottom: 8px;
      font-size: 14px;
      color: #717171;
    }
    .fS {
      font-size: 14px;
    }
    .w80 {
      width: 80%;
    }
    .repair {
      font-size: 14px;
      color: #3a3a3a;
      font-weight: 550;
      margin-bottom: 8px;
    }
  }
}
.reduceDetail {
  color: rgb(64, 158, 255);
  margin-left: 10px;
  text-decoration: underline;
  cursor: pointer;
}
</style>
